<template>
	<view>
		<!-- 顶部导航 -->
		<myHeader title="实名信息" showBack />
		<view class="info-list-wrap">
			<!-- 表单容器 -->
			<view class="form-container">
				<!-- 姓名输入 -->
				<view class="input-group">
					<text class="label">姓名</text>
					<input type="text" v-model="formData.name" placeholder="请输入真实姓名" :disabled="!isEditable"
						maxlength="20" />
				</view>

				<!-- 身份证号输入 -->
				<view class="input-group">
					<text class="label">身份证号</text>
					<input type="idcard" v-model="formData.idNumber" placeholder="请输入身份证号码" :disabled="!isEditable"
						maxlength="18" />
				</view>

				<!-- 完成按钮 -->
				<view class="footer">
					<button class="submit-btn" :disabled="isCertified" @tap="handleSubmit">
						{{ isCertified ? '已实名认证' : '完成' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		certification
	} from "@/api"; // 假设接口路径
	import http from "@/utils/http.js";

	export default {
		components: {
			myHeader
		},
		data() {
			return {
				userInfo: {}, // 用户信息缓存
				formData: {
					name: '', // 姓名（表单数据）
					idNumber: '' // 身份证号（表单数据）
				},
				isCertified: false, // 是否已实名认证
				isEditable: false // 输入框是否可编辑
			};
		},

		onLoad() {
			this.getUserInfo();
		},

		methods: {
			// 获取用户信息缓存
			getUserInfo() {
				const cachedUserInfo = uni.getStorageSync("userInfo");
				if (cachedUserInfo) {
					this.userInfo = cachedUserInfo;
					// 初始化表单数据
					if (cachedUserInfo.name) {
						this.formData.name = cachedUserInfo.name.slice(0, 1) + '*' + cachedUserInfo.name.slice(2)
					}
					if (cachedUserInfo.idNumber) {
						this.formData.idNumber = cachedUserInfo.idNumber.slice(0, 6) + '********' + cachedUserInfo.idNumber
							.slice(14)
					}

					// 判断是否已实名
					this.isCertified = cachedUserInfo.certify || false;
					this.isEditable = !this.isCertified;
				} else {
					// 无缓存时提示并返回（根据业务需求调整）
					uni.showToast({
						title: '用户信息异常',
						icon: 'none'
					});
					setTimeout(() => uni.navigateBack(), 1500);
				}
			},

			// 输入验证（可根据业务需求扩展）
			validateForm() {
				const nameReg = /^[\u4e00-\u9fa5]{2,20}$/; // 简单中文姓名校验
				const idReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/; // 身份证正则

				if (!nameReg.test(this.formData.name)) {
					uni.showToast({
						title: '请输入正确的姓名（2-20位中文）',
						icon: 'none'
					});
					return false;
				}

				if (!idReg.test(this.formData.idNumber)) {
					uni.showToast({
						title: '请输入正确的身份证号码',
						icon: 'none'
					});
					return false;
				}

				return true;
			},

			// 提交表单（修改实名信息）
			async handleSubmit() {
				if (this.isCertified) return; // 已认证无需提交

				if (!this.validateForm()) return; // 校验不通过

				uni.showLoading({
					title: '提交中...',
					mask: true
				});


				// 调用后端接口修改实名信息
				const res = await certification({
					name: this.formData.name,
					idNumber: this.formData.idNumber
				});

				if (res) {
					uni.showToast({
						title: '实名认证成功',
						icon: 'success',
						success: () => {
							setTimeout(() => {
								uni.navigateBack(); // 返回上一页
							}, 1500);
						}
					});
				} else {
					uni.showToast({
						title: res.msg || '认证失败，请重试',
						icon: 'none'
					});
				}

			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #141a2e;
		height: 100%;
	}

	.info-list-wrap {
		padding: 16rpx 32rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* 导航栏 */
	.nav-header {
		position: relative;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #141a2e;

		.back-icon {
			position: absolute;
			left: 15px;
			font-size: 24px;
			color: #fff;
		}

		.title {
			color: #3a86ff;
			font-size: 18px;
			font-weight: 500;
		}
	}

	/* 表单容器 */
	.form-container {
		flex: 1;
		padding: 20px 15px;
	}

	.input-group {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		position: relative;

		.label {
			display: block;
			font-size: 14px;
			color: #333;
			margin-bottom: 10px;
		}

		input {
			height: 40px;
			font-size: 16px;

			&::placeholder {
				color: #999;
			}
		}

		.password-tip {
			position: absolute;
			bottom: -19px;
			left: 0;
			font-size: 12px;
			color: #ff4d4f;
		}
	}

	/* 密码强度提示 */
	.password-strength {
		margin-top: 8px;
		font-size: 12px;
		color: #666;

		.weak {
			color: #ff4d4f;
		}

		.medium {
			color: #ffa940;
		}

		.strong {
			color: #52c41a;
		}
	}

	/* 底部按钮 */
	.footer {
		padding: 20px 15px 30px;
	}

	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		border-radius: 22px;
		background: #ccc;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		transition: background 0.3s;

		&:not(:disabled) {
			background: linear-gradient(to right, #3a86ff, #51aaff);
		}

		&::after {
			border: none;
		}
	}
</style>